<!--
 * @Descripttion: 设备台账查询
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-23 13:41:45
 * @LastEditTime: 2021-08-24 15:01:02
-->
<template>
    <div id="deviceRecordSearch">
        <div class="bg-title">
            <Theader :title="title">
                <template slot="header_arrow">
                    <van-icon size="25" name="arrow-left" @click="back" />
                </template>
                <template slot="header_icon">
                    <img :src="icon.rfid" class="icon-box">
                    <img :src="icon.scan" class="icon-box">
                </template>
            </Theader>
        </div>
        <van-search v-model="value" placeholder="请输入设备名称" />
        <div class="main-out">
            <div  v-for="(item,i) in subList" :key="i"  class="main-in">
                <van-cell>
                    <template #title>
                        <div class="flex-item">
                            <img src="../../images/image262-sub.png" class="icon-box">
                            <span class="custom-title">{{item}}</span>
                        </div>
                    </template>
                </van-cell>
            </div>
        </div>
    </div>
</template>
<script>
import Theader from '../component/header.vue'
export default {
    data(){
        return{
            value:'',
            title:'设备台账查询',
            subList:['花园山变电站','下关变电站','江北变电站','花园山变电站','下关变电站','江北变电站'],
            icon: {
                rfid:require('../../images/image118-rfid.png'),
                scan:require('../../images/vector.png'),
            },
        }
    },
    methods:{
        /**
        * @description: 返回
        * @param {*}
        * @return {*}
        */         
        back() {
            this.$router.push({
                name:'deviceSearchList',
            })
        },
        /**
            * @description: rifid
            * @param {*}
            * @return {*}
            */         
			rfidBtn() {

            },
            /**
             * @description: 扫一扫
             * @param {*}
             * @return {*}
             */
            scanBtn() {

			},
    },
    components:{
        Theader
    }
}
</script>

<style>
#deviceRecordSearch{
}
#deviceRecordSearch .bg-title{
    height: 45px;
}
#deviceRecordSearch .van-search{
  background-color: #F5F6F7;
}
#deviceRecordSearch .van-search__content{
  background-color: #fff;
}
#deviceRecordSearch .main-out{
    background: #F5F6F7;
    padding: 10px;
    height: calc(100vh - 120px);
}
#deviceRecordSearch .main-in{
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
}
#deviceRecordSearch .flex-item{
    display: flex;
    align-items: center;
}

#deviceRecordSearch .icon-box{
    height: 1.0625rem;
    width: 1.0625rem;
    padding: 0 5px;
}
</style>
